<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAROT</title>
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/vue@2.js"></script>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
</head>

<body>
    <div id="app" v-cloak>
        <t-header></t-header>
        <main class="container">
            <section>
                <div class="top">
                    <h1>Free Online</h1>
                    <h1><span>AI Tarot</span> Reading</h1>
                    <p>Explore your future with our free AI tarot reading</p>
                    <div class="ai-img">
                        <img src="./imgs/home.webp" alt="home" width="140">
                    </div>
                    <a class="start" href="./ai.html">
                        Start Reading
                    </a>
                </div>
            </section>
            <section style="margin-top: 80px;">
                <ul>
                    <li v-for="item in list" style="margin-bottom: 80px;">
                        <div class="list">
                            <div class="list-img">
                                <img :src="item.img" :alt="item.title">
                            </div>
                            <div class="list-content">
                                <h1 class="list-content-h1">{{item.title}}</h1>
                                <p class="list-content-desc">{{item.desc}}</p>
                                <a class="list-content-button" :href="item.href">
                                    {{item.btn}}
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </section>
            <section>
                <div class="top tarot-blog">
                    <h1>Tarot Blog</h1>
                    <img class="heart" src="./imgs/heart.svg" alt="heart">
                    <p class="sub">Explore the latest free tarot reading, tips, and in-depth analyses</p>
                    <div class="blog">
                        <ul class="blog-list">
                            <li class="blog-list-item" v-for="item in blog" :key="item.id">
                                <div class="item_img">
                                    <img :src="item.infographic" :alt="item.title">
                                </div>
                                <div class="item-content">
                                    <h1 class="item-content-title">{{item.title}}</h1>
                                    <p class="item-content-desc">
                                        {{item.information}}
                                    </p>
                                </div>
                                <a :href="`./detail.html?id=${item.id}`"></a>
                            </li>
                        </ul>
                        <a class="list-content-button" href="./blog.html" style="margin: 0 auto;">
                            View All Posts
                        </a>
                    </div>
                </div>
            </section>
            <section>
                <div class="question-title">
                    <h2>Frequently Asked Questions about AI Tarot Reading</h2>
                </div>
                <div class="question">
                    <ul class="question-list">
                        <li class="question-list-item" v-for="item in question">
                            <div class="question-item-content">
                                <h1 class="question-item-content-title">{{item.title}}</h1>
                                <p class="question-item-content-desc">
                                    {{item.content}}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
        <t-footer></t-footer>
    </div>
</body>
<script src="./main.js"></script>
<script type="module">
    import { header, footer } from './components/index.js'
    import { meanings } from './js/cardMeanings.js'
    var vm = new Vue({
        el: '#app',
        components: {
            tHeader: header,
            tFooter: footer
        },
        data() {
            return {
                id: 0,
                detail: {
                    
                },
                question: [
                    {
                        title: 'Can I repeat a reading for the same question?',
                        content: `It's not recommended to frequently repeat free tarot reading for the same question. Each reading represents the energy state at that moment, and frequent repetition may lead to confusion. We suggest conducting another AI tarot reading when there's a significant change in your situation to gain new insights.`
                    },
                    {
                        title: 'What should I pay attention to before a tarot reading?',
                        content: `Before starting an online tarot reading, we recommend finding a quiet environment and maintaining a calm mindset. Clarify the question you want to ask and keep an open mind to receive guidance from the tarot cards. Remember, AI tarot reading is a tool for self-exploration and reflection, and the final decision rests with you.`
                    },
                    {
                        title: 'Can tarot cards predict the future?',
                        content: `Divination primarily reflects the current energy state and possible development trends, rather than definite future predictions. It provides guidance and insights to help you better understand your current situation and potential opportunities. The future remains in your hands through your choices and actions.`
                    },
                    {
                        title: 'Are there any taboos or limitations in tarot card reading?',
                        content: 'For ethical and legal reasons, our AI tarot reading system does not answer sensitive questions about life safety, major disease diagnoses, legal disputes, or financial investments. Please consult relevant professionals for these matters. Online tarot reading are mainly used for personal growth and self-awareness exploration.'
                    },
                    {
                        title: 'Are online tarot card results accurate? How to correctly interpret the reading results?',
                        content: 'The accuracy of AI tarot reading results depends on multiple factors, including the quality of your question and personal understanding. We suggest viewing the reading results as a reference and reflection tool, rather than absolute truth. Combine the results with your specific situation, deeply consider the symbolic meaning of the cards, and extract valuable insights. Remember, tarot cards are a tool to stimulate intuition and self-awareness, and the final interpretation is up to you.'
                    }
                ],
                list: [
                        {
                            title: 'AI Tarot Reading',
                            desc: 'Intuitive tarot reading with different styles of tarot readers to interpret your questions',
                            btn: 'Start Reading',
                            href: '',
                            img: './imgs/aitarot.webp'
                        },
                        {
                            title: 'Daily Tarot Fortune',
                            desc: `Explore today's tarot guidance and unveil your destiny's path. One card each day to gain insight into life's mysteries.`,
                            btn: `View Today's Fortune`,
                            href: './daily.html',
                            img: './imgs/dailytarot.webp'
                        }
                    ],
                blog: []
            }
        },
        created() {
            this.handleFetchBlogList()
        },
        methods: {
            handleFetchBlogList() {
                fetch('https://migame.vip/gamefront/blog/blogApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: 1,
                        pageSize: 6,
                        siteId,
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.blog = res.data
                        }
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
            },
        }
    })
</script>

</html>